<template>
  <div class="exchange">
    <div class="img">
      <img v-bind:src="imgSrc" alt="充值卡">
    </div>
    <div class="desc" v-bind:class="{success_img: success}">
      <div class="desc_header cf">
        <span class="desc_title">物品介绍</span>
        <button class="desc_share" @click="nativeCall">去分享 》</button>
      </div>
      <p class="desc_cont">{{descCont}}x1</p>
    </div>
    <div v-if="!which">
      <div class="use">
        <p class="use_title">
          充值信息
        </p>
        <div v-if="!success">
          <input class="use_phoneNumber" v-validate="'required|phone'" name="phone" type="text" placeholder="请填写您要充值的手机号码" ref="phone">
          <p class="validate_tips" v-show="errors.has('phone')">{{errors.first('phone')}}</p>
          <button class="use_btn" v-on:click="useClick($event)"></button>
        </div>
        <div class="success_phone" v-if="success">
          <p>充值成功！</p>
        </div>
      </div>
      <p class="tips">温馨提示：确认充值后，后台处理需要一定的时间，请耐心等待</p>
    </div>
    <div v-if="which">
      <div class="use_another">
        <p class="use_title">
          商品信息
        </p>
        <div v-if="!success">
          <label>姓名：
            <input type="text" placeholder="收件人" name="receiver" v-validate="'required|receiver'" ref="receiver">
          </label>
          <p class="validate_tips validate_tips_left" v-show="errors.has('receiver')">{{errors.first('receiver')}}</p>
          <label>电话：
            <input type="text" placeholder="请填写您的手机号码" v-validate="'required|phone'" name="phone" ref="phonet">
          </label>
          <p class="validate_tips validate_tips_left" v-show="errors.has('phone')">{{errors.first('phone')}}</p>
          <label>地址：
            <textarea placeholder="收件人地址" name="receiverAddress" v-validate="'required|receiverAddress'" ref="receiverAddress"></textarea>
          </label>
          <p class="validate_tips validate_tips_left" v-show="errors.has('receiverAddress')">{{errors.first('receiverAddress')}}</p>
          <button class="another_btn" v-on:click="anotherClick($event)"></button>
        </div>
        <div class="success_phone" v-if="success">
          <p>领取成功！</p>
        </div>
        <p class="tips">温馨提示：确认充值后，后台处理需要一定的时间，请耐心等待</p>
      </div>
    </div>

<div v-if="phoneNumShow" class="one_pop_cover">

    <div class="one_pop" >
      <h1 class="one_pop_title">立即使用<span>1</span>张<span>{{descCont}}</span></h1>
      <p class="one_pop_desc">确认要充值的手机号</p>
      <p class="one_phone_num">{{phoneNum}}</p>
      <div>
        <button class="one_pop_cancel" v-on:click="oneCancel"></button>
        <button class="one_pop_sure" v-on:click="oneSure"></button>
      </div>
    </div>
</div>

<div v-if="anotherShow" class="one_pop_cover">
    <div class="one_pop">
      <h1 class="one_pop_title">领取<span>1</span>张<span>{{descCont}}</span></h1>
      <p>确认联系人信息</p>
      <div class="another_content">
        <p>联系人：<span>{{linkMan}}</span></p>
        <p>联系人电话：<span>{{phoneNum}}</span></p>
        <p>收件人地址：<span>{{linkAddress}}</span></p>
      </div>
      <div>
        <button class="one_pop_cancel" v-on:click="another_cancel"></button>
        <button class="one_pop_sure" @click="another_sure"></button>
      </div>
    </div>
</div>
  </div>
</template>


<script>
import axios from "axios";
import utils from "../../scripts/utils";
import qs from "qs";
export default {
  data() {
    return {
      imgSrc: "",
      descCont: "",
      href: "",
      which: false,
      isSure: false,
      exchange: "",
      success: false,
      phoneNum: "",
      phoneNumShow: false,
      anotherShow: false,
      linkMan: "",
      linkAddress: ""
    };
  },
  created() {
    this.getParams();
  },
  methods: {
    getParams() {
      let params = JSON.parse(this.$route.query.data);
      console.log(params);
      this.imgSrc = params.src;
      this.exchange = params.exchange;
      this.descCont = params.title;
      let base = "native://?action=share&title={{href}}";
      let title = `${params.title}正在大放送！`;
      let url = "http://hnyy.happypoker.cn/share.html";
      let content = "我在益友棋牌游戏中获得了" + params.title + "，戳这里！立即领取!";
      this.href =
        "native://?action=share&title=" +
        encodeURIComponent(title) +
        "&content=" +
        encodeURIComponent(content) +
        "&url=" +
        encodeURIComponent(url);
      if (params.type === 3) {
        this.which = true;
      }
    },
    oneCancel() {
      this.phoneNumShow = false;
    },
    another_cancel() {
      this.anotherShow = false;
    },
    another_sure() {
      this.anotherShow = false;
      axios
        .post(
          "/api/mobile/usegoods",
          qs.stringify({
            count: 1,
            total: 0,
            mobile: this.$refs.phonet.value,
            exchangeid: this.exchange,
            consignee: this.$refs.receiver.value,
            address: this.$refs.receiverAddress
          }),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
            }
          }
        )
        .then(() => {
          this.success = true;
        })
        .catch(() => {});
    },
    nativeCall() {
      //分享调起原生
      utils.native_call(this.href);
    },
    oneSure() {
      this.phoneNumShow = false;
      axios
        .post(
          "/api/mobile/usegoods",
          qs.stringify({
            count: 1,
            total: 0,
            mobile: this.$refs.phone.value,
            exchangeid: this.exchange
          }),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
            }
          }
        )
        .then(() => {
          this.success = true;
        })
        .catch(() => {});
    },
    useClick(evt) {
      let useBtn = evt.target;
      if (!this.errors.has("phone") && this.$refs.phone.value.length > 0) {
        useBtn.style.disabled = "";
        this.phoneNum = this.$refs.phone.value;
        this.phoneNumShow = true;
      }
    },
    anotherClick(evt) {
      let useBtn = evt.target;
      console.log(this.$refs);
      if (
        !this.errors.has("phone") &&
        this.$refs.phonet.value.length > 0 &&
        this.$refs.receiver.value.length > 0 &&
        this.$refs.receiverAddress.value.length > 0
      ) {
        useBtn.style.disabled = "";
        this.anotherShow = true;
        this.phoneNum = this.$refs.phonet.value;
        this.linkMan = this.$refs.receiver.value;
        this.linkAddress = this.$refs.receiverAddress.value;
      }
    }
  }
};
</script>


<style scoped>
.exchange {
  background: url("../images/bg.png");
  background-size: cover;
  padding-top: 1rem;
  padding-bottom: 1.4rem;
  color: #fff;
  min-height: 100%;
}

.img {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 0.1rem 0.4rem;
  text-align: center;
}

.img img {
  margin: 0.1rem;
}

.desc {
  padding: 0.1rem 0.4rem;
}

.desc_header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0.2rem 0;
}

.desc_title {
  float: left;
  font-size: 0.28rem;
  margin: 0;
  line-height: 0.4rem;
  padding-left: 0.5rem;
  background: url("../images/0011.png") no-repeat;
  background-size: 0.4rem;
}

.desc_share {
  color: #fff;
  float: right;
  font-size: 0.28rem;
  text-decoration: blink;
}

.tips {
  padding: 5px;
  color: #fff;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 0.2rem;
}

.desc_cont {
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 0.28rem;
  padding: 0.2rem 0.4rem;
}

.use {
  text-align: center;
}

.use_title {
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  line-height: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0.2rem 0 0.2rem 0.5rem;

  font-size: 0.28rem;
  margin: 0.3rem 0.4rem;
  line-height: 0.4rem;
  background: url("../images/0011.png") 0 0.22rem no-repeat;
  background-size: 0.4rem;
  text-align: left;
}

.use_phoneNumber {
  color: #fff;
}

.use input {
  display: block;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.2);
  border: 0px solid #34aadc;
  box-shadow: none !important;
  padding: 0.15rem 0.3rem;
  font-size: 0.28rem;
  width: 70%;
}

.use_another input,
.use_another textarea {
  color: #fff;
}

.another_btn,
.use_btn {
  width: 2.4rem;
  height: 1.008rem;
}

.use_btn {
  background: url("../images/querenchongzhi1.png"),
    url("../images/konganniu3.png");
  background-size: 65%, contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0.6rem auto;
}

.use_another {
  font-size: 0.28rem;
}

.use_another label {
  display: block;
  padding: 0.1rem 0.6rem;
}

.use_another input,
.use_another textarea {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.15rem;
  padding: 0.1rem 0.3rem;
  font-size: 0.24rem;
  width: 60%;
}

.use_another input {
  height: 0.48rem;
}

.use_another textarea {
  height: 1rem;
  vertical-align: middle;
}

.another_btn {
  display: block;
  background: url("../images/duijiang1.png"), url("../images/konganniu3.png");
  background-size: 60%, contain !important;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0.2rem auto 0.6rem;
}

.validate_tips {
  text-align: left;
  width: 70%;
  margin: 0 auto;
  margin-top: 0.2rem;
}

.validate_tips_left {
  width: 55%;
  margin-top: 0.05rem;
  margin-bottom: 0.1rem;
}

.success_img {
  background: url("../images/yiduihuan1.png") no-repeat;
  background-size: 110px;
  background-position: 50px center;
}

.success_phone {
  margin-bottom: 1.5rem;
  text-align: center;
}
.one_pop_cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}
.one_pop {
  color: #333;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 1);
  width: 90%;
  margin: 10px auto;
  overflow: hidden;
  font-size: 0.25rem;
  padding: 15px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.one_pop_title {
  font-size: 0.3rem;
}
.one_pop_title span {
  color: red;
}
.one_pop_desc {
  margin-top: 20px;
  font-size: 0.25rem;
}

.one_pop_cancel {
  float: left;
  background: url("../images/quxiao1.png") no-repeat,
    url("../images/konganniu3.png") no-repeat;
  background-size: 65%, contain;
}
.one_pop_sure {
  float: right;
  background: url("../images/queding1.png") no-repeat,
    url("../images/konganniu3.png") no-repeat;
  background-size: 65%, contain;
}
.one_pop_cancel,
.one_pop_sure {
  width: 2rem;
  height: 1rem;
  background-repeat: no-repeat;
  background-position: center;
}

.one_phone_num {
  text-align: center;
  margin-bottom: 0.3rem;
  margin-top: 0.2rem;
}
.another_content {
  background: rgba(255, 255, 255, 0.7);
  width: 90%;
  margin: 10px auto;
  overflow: hidden;
  font-size: 0.25rem;
  color: #8a6d3b;
}
.another_content p {
  text-align: center;
}
</style>
